<%@ page contentType="text/html; charset=UTF-8" language="java" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>  
<c:set var="appPath" scope="application" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>

<html>
<head>
<title>選擇角色-基因改造植物安全管理知識庫</title>	
	<link rel="stylesheet" type="text/css" href="${appPath}/resource/css/layout-default-latest.css" />	
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>	
	<script src="http://slidesjs.com/examples/linking/js/slides.min.jquery.js"></script>	
	<SCRIPT type="text/javascript" src="${appPath}/resource/js/jquery.layout-latest.js"></SCRIPT>
</head>
	
<style>
	.bar_2{color:#666666;border:1px solid #69B7D3;/*藍框*/}	
	a{color:#172447;font-size:12px;font-weight:200;text-decoration:none;}
	a:hover {color:#172447;font-size:12px;font-weight:200;text-decoration:none;}	
	a.sty01 {color:#172447;font-size:14px;font-weight:300;text-decoration:none;}		
	.trHeader  {background-color: #cccccc;font-size: 12px;text-align: left;font-weight: 200;color: #121212;}
	table td {font-size: 12px;}	
	.error_1{border:2px dotted #ff0000;}	
	
	 .ui-layout-pane-north {
	     border: 0 !important; 
	     padding:0 !important; 
	     margin-bottom:0 !important; 
	     background: none !important; 
	}
	.ui-layout-pane-center { 
	     border: 0 !important; 
	     padding:0 !important; 
	     margin-bottom:0 !important; 
	     background: none !important; 
	}
	
	h1 {
		margin-left: 0px;
		padding: 10px 0px 0px 40px;
		letter-spacing: 2px;
		/* text-transform: lowercase; */
		font-family: 微軟正黑體;
		font-size: 40px; 
		/* color: #FF3000; */
		color: #6C6C6C;
		font-weight: 600; 
	}
	
	/* table, td, th{border:1px solid black;} */
	
	
	input.groovybutton{
	   font-size:14px;
	   /* font-family:Arial,sans-serif; */
	   height:22px;
	   background-color:#779999;
	   background-image:url(${pageContext.request.contextPath}/resource/image/back03.gif);
	   border-style:solid;
	   border-color:#DDDDDD;
	   border-width:1px;
	}
	
	input.groovybutton2{
	   font-size:12px;
	   /*font-family:Times New Roman,serif;*/
	   font-weight:bold;
	   width:102px;
	   height:20px;
	   background-color:#FFFFFF;
	   background-image:url(texas.gif);
	   border-style:solid;
	   border-color:#999999;
	   border-width:1px;
	}
</style>



<style type="text/css" media="screen"> 
	/*
		Load CSS before JavaScript
	*/
	
	/*
		Slides container
		Important:
		Set the width of your slides container
		Set to display none, prevents content flash
	*/
	.slides_container {
		width:470px;
		display:none;
	}

	/*
		Each slide
		Important:
		Set the width of your slides
		If height not specified height will be set by the slide content
		Set to display block
	*/
	.slides_container div {
		width:470px;
		height:270px;
		display:block;
	}
	
	/*
		Optional:
		Reset list default style
	*/
	.pagination {
		list-style:none;
		margin:0;
		padding:0;
	}

	/*
		Optional:
		Show the current slide in the pagination
	*/
	.pagination .current a {
		color:red;
	}
</style>

<script> 
$(function(){
	$('body').layout({ 
		applyDefaultStyles: false,
		north__size:130,
		north__resizable:true,
		
		south__size:60,
		south__resizable:true,
		
		spacing_open:0,
		spacing_closed:0,
		hideTogglerOnSlide:true,
		togglerAlign_open:"center",
		fxName:"drop",
		fxSpeed:"slow"
	});
	
	
	$('#slides').slides({	
		preload: false,
		//generateNextPrev: true,	
		generatePagination: false,
		start : 2
	});
});
</script>

<body style="background-color: #DEEDF8">      

<div class="ui-layout-north" style="text-align: center">
	<h1>基因改造植物安全管理知識庫</h1>
</div>

<div class="ui-layout-south" style="text-align: center; padding: 5px;font-size: 12px;background-color: #DEEDF8" >
台灣農業科技資源運籌管理學會<br/>
104 台北市中山區松江路362巷4號4樓‧<!--  電話：02-33661693、02-33668611‧傳真：02-33668614 --><br/>
建議使用IE 7以上版本瀏覽器最佳觀看解析度1024x768
</div>

<div class="ui-layout-center" align="right">  
	<div style="padding-top:100px;padding-right:300px;">
		<form method="post" id="loginform" action="${appPath}/index/login2.htm">
			<input type="hidden" name="username" value="${USERS.username }">
			<input type="hidden" name="password" value="${USERS.password }">
			<table style="width:600px;border:0px solid black;" >
				<tr> 
					<td style="width:200px;text-align: right;padding-right:5px;">
						請選擇登入角色 ：
					</td>
					<td style="width:160px;">
						<select name="role" style="width:150px;" class="bar_2">				
							<c:forEach var="r" items="${ROLES }">  
								<option value="${r.name}">${r.description }</option>
							</c:forEach>
						</select>
						
					</td>
					<td style="width:70px;text-align: center;padding-left:0px;">	
						<input type="submit" style="width:60px;" value="選擇" class="groovybutton"/>
					</td>
					<td style="text-align: center;">	
						<a href="${appPath }/index.jsp">
							<img src="${appPath }/resource/image/arror-l.png" border="0" />
							<img src="${appPath }/resource/image/arror-l.png" border="0" />
							返回登入頁
						</a>
					</td>
				</tr>
			</table>								
		</form>	 
	</div>
</div>

</body>
</html>